<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <link rel="stylesheet" href="Resume.css"> -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1468487164_6690426.css">
    <title>Resume</title>
    <script>
        var pageWidth = document.documentElement.clientWidth;
        var content = 'html{font-size:'+pageWidth/64+'px};'
        var style = document.createElement('style')
        style.innerHTML = content
        document.head.appendChild(style)
    </script>
<style type="text/css">

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font: 1rem/150% Arial,'微软雅黑',"\5b8b\4f53";
    -webkit-font-smoothing: antialiased;
}
ul,li {
            list-style: none;
        }
.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.wrapper{
    width: 64rem;
    /*height: 86rem;*/
    background-color: #ccc;


}
.wrapper:after{
    content: "";
    clear: both;
    display: block;
}
.wrapper aside{
    width: 24rem;
    height: 88rem;
    padding: 2rem 3rem;
    float: left;
    vertical-align: top;
    color: #282a29;
    font-family: 微软雅黑;
    position: relative;
    background: #ccc;
    /*box-shadow: 10px 0 10px #888;*/
}
.name{
    color: #0078FF;
}
aside .headimg{
    display: inline-block;
    width: 12rem;
    height: 12rem;
    margin: 0rem 3rem;
    border-radius: 6rem;
    overflow: hidden;
}
aside .headimg img{
    width: 12rem;

}
aside .information{
    text-align: center;
}
.information .name{
    font-size: 2.5rem;
    height: 5rem;
    line-height: 5rem;
    font-family: SimHei;
    font-weight: bolder;
}
.information .introduce{
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.information .introduce *{
    font-size: 1.5rem;
}
aside .aboutme{
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.aboutme li{
    margin: .5rem 0;
}
.aboutme .q{
    display: inline-block;
    width: 6.5rem;
    text-align: right;
}
.skillbar{
    margin-top: 30px;
}

.skillbar li{
    margin: .5rem 0;
    display: inline-block;
    line-height: 1.5rem;
    height: 1.5rem;
}
.skillbar .skillname{
    display: inline-block;
    width: 5.5rem;
    text-align: right;
    margin-right: 1rem;
    
}
.skillbar .basebar{
    display: inline-block;
    width: 11rem;
    height: 1rem;
    line-height: 1rem;
    border-radius: .5rem;
    background-color: #999;
    vertical-align: middle;
    overflow: hidden;
}
.skillbar .progressbar{
    height: 1rem;
    display: inline-block;
    background: #252525;
}
aside .connectme{
    position: absolute;
    bottom: 18rem;
}
.connectme a{
    font-size: 1.2rem;
    color: #252525;
}
.connectme .r-icon{
    font-size: 1.5rem;
    vertical-align: baseline;
    margin-left: 1.5rem;
    margin-right: 1rem;
    /*color: #252525;*/
}
.connectme span{
    
}
.wrapper article{
    width: 40rem;
    height:88rem;
    line-height: 100%;
    padding: 2rem;
    /*margin-top: -1.5rem;*/
    float: left;
    background: #fff;
    padding-right:94px;
}
article h3{
    font-size: 2rem;
    height: 2rem;
    line-height: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-family: SimHei;
    color: #0078FF;
    font-weight: bolder;
}
.skill h4{
    font-weight: bolder;
    color: #787878;
    line-height: 2rem;
}
.skill ul li{
    color: #343744;
    font-size: 18px;
    line-height: 34px;
}
article .project{
    margin-top:4rem;
}
article .project .item a{
    color: #202021;
    text-decoration: underline;
    font-size: 1.5rem;
    /*margin-left: 1rem;*/
}
article .project .item div{
    color: #787878;
}
article img{
    width: 6rem;
    -webkit-filter:brightness(.7);
}
article .demo ul li{
    display: block;
    float: left;
    width: 18rem;
}
article .demo ul li a{
    color: #202021;
    text-decoration: underline;
    font-size: 1.2rem;
    margin-left: 1rem;
}
article .demo ul li div{
    color: #787878;
}
article .expect div{
    color: #787878;
}
.page{
    position: relative;
    top: 62px;   
}
.item div{
    font-size: 14px;
}
.mail span{
    color: #6984B6;
}
.blog span{
    color: #D8CAB8;
}
.github span{
    color: #73D8F7;
}
 .more {
    top: 4.4rem;
}   
.projectitem .item{

    margin-top: 1.1rem;
}
    </style>



</head>
<body>
    <div class="wrapper">
        <aside>
            <!-- <div class="headimg">
                <img src="header.png" alt="我是头像">
            </div> -->
            <div class="information">
                <div class="name">姜杭轩</div>
                <div style="border: 2px solid #777"></div>
                <div class="introduce">
                    <!--<span>一个像素的偏执</span><br>-->
                    <!--<span>一行代码的优雅</span><br>-->
                    <!--<span>一张页面的完美</span><br>-->
                    <p>前端工程师</p>
                    <p>The front-end engineer</p>
                </div>
                <div style="border: 1px solid #888"></div>
            </div>
            <div class="aboutme">
                <ul class="details">
                    <li>
                        <span class="q">意向职位：</span>
                        <span class="a">Web前端开发工程师</span>
                    </li>
                    <li>
                        <span class="q">期望待遇：</span>
                        <span class="a">面议</span>
                    </li>
                    <li>
                        <span class="q">工作经验：</span>
                        <span class="a">1年</span>
                    </li>
                    <!-- <li>
                        <span class="q">教育经历：</span>
                        <span class="a">上海城市管理学院</span>
                    </li>
                    <li>
                        <span class="q">学历：</span>
                        <span class="a">大专</span>
                    </li> -->
                    <li>
                        <span class="q">出生日期：</span>
                        <span class="a">1994年1月</span>
                    </li>
                    <li>
                        <span class="q">目标城市：</span>
                        <span class="a">上海</span>
                    </li>
                    <li>
                        <span class="q">QQ：</span>
                        <span class="a">928139808</span>
                    </li>
                    <li>
                        <span class="q">微信/电话：</span>
                        <span class="a">18817818001</span>
                    </li>
                    <li>
                        <span class="q">联系邮箱：</span>
                        <span class="a">josh@joshgo.top</span>
                    </li>
                </ul>
                <div style="border: 1px solid #aaa"></div>
            </div>
            <ul class="skillbar">
                <li>
                    <span class="skillname">HTML</span>
                    <span class="basebar">
                        <span class="progressbar" style="width: 90%"></span>
                    </span>
                </li>
                <li>
                    <span class="skillname">CSS</span>
                    <span class="basebar">
                        <span class="progressbar" style="width: 85%"></span>
                    </span>
                </li>
                <li>
                    <span class="skillname">JavaScript</span>
                    <span class="basebar">
                        <span class="progressbar" style="width: 80%"></span>
                    </span>
                </li>
                <li>
                    <span class="skillname">Node.js</span>
                    <span class="basebar">
                        <span class="progressbar" style="width: 30%"></span>
                    </span>
                </li>
                <li>
                    <span class="skillname">Webpack</span>
                    <span class="basebar">
                        <span class="progressbar" style="width: 40%"></span>
                    </span>
                </li>
                <li>
                    <span class="skillname">Vue.js</span>
                    <span class="basebar">
                        <span class="progressbar" style="width: 45%"></span>
                    </span>
                </li>
                
                <li>
                    <span class="skillname">jQuery</span>
                    <span class="basebar">
                        <span class="progressbar" style="width: 80%"></span>
                    </span>
                </li>
                
                <li>
                    <span class="skillname">Less</span>
                    <span class="basebar">
                        <span class="progressbar" style="width: 60%"></span>
                    </span>
                </li>

            </ul>
            <p class="page" style="text-align:center"><a href="http://jianghangxuan.coding.me/resumePage/resume-page/index" style="text-decoration: underline;color:#0078FF;font-size:1.3rem" target="_blank">个人在线简历</a></p>

            <div class="connectme">

                <p class="mail">
                    <span class="r-mail r-icon"></span>
                    <a href="mailto:jianghangxuan@foxmail.com?subject=Job Opportunity" target="_blank">jianghangxuan@foxmail.com</a>
                </p>
                <p class="blog">
                    <span class="r-jian r-icon"></span>
                    <a href="http://www.jianshu.com/u/3ecbe81ebc23" target="_blank">简书博客</a>
                </p>
                <p class="github">
                    <span class="r-github r-icon"></span>
                    <a href="https://github.com/JaeJiang" target="_blank">github.com/JaeJiang</a>
                </p>
            </div>
        </aside>
        <article>
            <div class="skill">
                <h3>关于个人</h3>
                <h4>能力技能</h4>
                <ul class="skilldetail">
                    <li>1.熟悉并会运用Vue框架,Webpack的基础功能。</li>
                    <li>2.了解Node.js并在继续学习中.</li>
                    <li>3.了解ECMA5的标签规范以及HTML5新标签及CSS3样式及动画。</li>
                    <li>4.熟悉Ajax、JavaScript、jQuery、JSON等前端技术，掌握面向对象编程思想。</li>
                    <li>5.熟悉使用PhotoShop切图，像素级重构，可准确还原设计。</li>
                    <!--<li>6.在工作和项目的积累中，渐渐了解PhotoShop的使用，熟练掌握切图技能，根据psd稿按要求按质量的完成html切图，解决对大部分主流浏览器的兼容问题。</li>-->
                    <li>6.熟练运用jQuery库，了解AJAX、JSONP等。对盒模型，定位，浮动等理解深刻并会运用。</li>
                    <li>7.了解CSS3常用属性，可以完成各种特效，熟悉HTML 5的相关新特性，了解响应式布局及媒体查询，并可用来制作响应式页面。</li>

                    <li>8.在工作和学习中碰到问题能够独立自主靠搜索引擎解决，希望找到一份前端工程师的工作，加入一个热情洋溢的团队，提高自己的能力和技术，使自己成长的同时，能更好的为这个团队服务。</li>
                    <!-- <li>了解产出兼容于目前主流浏览器的前端页面</li> -->
                </ul>
                <!--<h4>遇到问题，解决问题</h4>-->
                <!--<ul class="skilldetail2">-->
                    <!--<li>去年的时候，逛到了阮一峰老师的博客，知道了webpack这个前端资源模块化管理打包工具，我觉得我应该学习学习应用到实际场景中</li>-->
                    <!--<li>依靠在知乎上学习一位大牛学新东西的套路：[copy - run - modify]</li>-->
                    <!--<li>1.抄文档给的例子</li>-->
                    <!--<li>2.在自己这里运行成功</li>-->
                    <!--<li>3.改一下，看还能不能运行成功。所以学 Webpack我也也遵循同样的套路。</li>-->
                    <!--<li>后来经过一段时间的google，出错，修改，运行~直到成功在本地配置了webpack进行编程。</li>-->
<!--</p>-->
                <!--</ul>-->
            </div>
            <div class="project">
                <h3>项目经历</h3>
                <ul class="projectitem">
                    <!-- <li>
                        <div class="item">
                            <!--<img src="http://i1.piimg.com/567571/133e6c6bf6d3ccaf.png" alt="">-->
                         <!--    <a href="https://github.com/JaeJiang/vue-project" target="_blank">在线简历制作工具</a>
                            <div>功能可以实现:添加简历内容，包括个人信息、工作经历、学习经历、获奖情况、项目经历和联系方式
                                。更新简历内容,选择简历,模板预览简历,发布简历.使用技术：Vue.js、vue-cli、Vuex、LeanCloud</div>
                        </div>
                    </li>  -->
                    <li>
                        <div class="item">
                            <!--<img src="http://p1.bqimg.com/567571/4e2f52b19b19ae9f.png" alt="">-->
                            <a href="http://jianghangxuan.coding.me/music/vue-music/page" target="_blank">Vue音乐播放器</a>
                            <div>简介：基于 Vue 的音乐播放器  使用技术：Vue、 Webpack、 JavaScript、 AJAX、 HTML5</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <!--<img src="http://i1.piimg.com/567571/9446de046b81d410.png" alt="">-->
                            <a href="http://jianghangxuan.coding.me/todo/todos/page" target="_blank">Vue在线日程表</a>
                            <div>简介：基于 Vue 的Todolist 主要运用技术：Vue、Webpack、JavaScript、LeanCloud（准备以这个再加个登录功能,储存数据）</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <!--<img src="http://p1.bqimg.com/567571/133bb8822e187fe2.png" alt="">-->
                            <a href="https://jaejiang.github.io/resume/%E4%BB%8A%E6%97%A5%E5%A4%B4%E6%9D%A1/" target="_blank">今日头条首页</a>
                            <div>简介：仿今日头条首页 使用技术: jQuery、 JavaScript，用flex属性重新构造布局,得到更好的用户体验.</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <!--<img src="http://p1.bqimg.com/567571/3b3063c2b50200af.png" alt="">-->
                            <a href="https://jaejiang.github.io/resume/waterfall-page/waterfall" target="_blank">新浪新闻简页</a>
                            <div>简介：新浪新闻简页 主要运用技术：Query、 AJAX、 HTML5等 通过AJAX拿到新闻数据,再通过瀑布流的方式展现出来</div>
                        </div>
                    </li>
                    <li>
                        <div class="item">
                            <!--<img src="http://p1.bpimg.com/567571/d313bcc141bfc9fa.png" alt="">-->
                            <a href="https://jaejiang.github.io/resume/slide/fullpage" target="_blank">全屏无限轮播</a>
                            <div>简介：全屏无限轮播图 主要运用技术：HTML5、CSS、 jQuery实现全屏无限轮播功能。</div>
                        </div>
                    </li>
                    <!--<li>-->
                        <!--<div class="item">-->
                            <!--<img src="http://p1.bqimg.com/567571/b18d83f58867c1f9.png" alt="">-->
                            <!--<a href="https://jaejiang.github.io/resume/css3/3d-carousel" target="_blank">3D旋转木马效果</a>-->
                            <!--<div>简介：3D旋转木马 主要运用技术：CSS3 3D.transform 展示“旋转木马”效果。</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <li>
                        <div class="item">
                            <!--<img src="http://i1.piimg.com/567571/55fa5ded8e116b11.png" alt="">-->
                            <a href="https://jaejiang.github.io/resume/datepicker/datepicker" target="_blank">datepicker(日历)</a>
                            <div>简介：datepicker 主要运用技术：HTML5、CSS、jQuery实现点击弹出日历界面，选择天数。</div>
                        </div>
                    </li>

                </ul>
            </div>
            <p class="page more" style="text-align:center"><a href="https://github.com/JaeJiang/resume" style="text-decoration: underline;color:#0078FF;font-size:1.3rem" target="_blank">源码以及更多</a></p>
            <!-- <div class="demo">
                <h3>小设计</h3>
                <ul class="demoitem clearfix">
                    <li>
                        <img src="https://oapy20uns.qnssl.com/login.png" alt="">
                        <a href="http://book.jirengu.com/jirengu-inc/jrg-vip8/members/Zegendary/mission/%E6%BC%82%E4%BA%AE%E7%9A%84%E7%99%BB%E9%99%86%E6%A1%86/login.html" target="_blank">漂亮的登录框</a>
                        <div>简介：简洁的登陆界面，样式优雅</div>
                    </li>
                    <li>
                        <img src="https://oapy20uns.qnssl.com/bigger.png" alt="">
                        <a href="http://book.jirengu.com/jirengu-inc/jrg-vip8/members/Zegendary/%E5%A4%A7%E8%AE%BE%E8%AE%A1/high%20bigger%20slides/high-bigger-slides.html" target="_blank">高逼格的轮播</a>
                        <div>简介：简洁的苹果轮播页面</div>
                    </li>
                    <li>
                        <img src="https://oapy20uns.qnssl.com/mouse.png" alt="">
                        <a href="http://zegendary.coding.me/project/%E5%A4%A7%E8%AE%BE%E8%AE%A1/mouse%20game/attack.html" target="_blank">打地鼠游戏</a>
                        <div>简介：使用js制作的一款小型打地鼠游戏</div>
                    </li>
                    <li>
                        <img src="https://oapy20uns.qnssl.com/star.png" alt="">
                        <a href="http://book.jirengu.com/jirengu-inc/jrg-vip8/members/Zegendary/%E5%A4%A7%E8%AE%BE%E8%AE%A1/solar%20system/solar%20system.html" target="_blank">太阳系动图</a>
                        <div>简介：运用CSS3动画制作的太阳系模型</div>
                    </li>
                </ul>
            </div> -->
            <!-- <div class="expect">
                <h3>新工作期望</h3>
                <div>希望加入一个以技术为驱动的互联网公司，从事前端开发工作，并且可以提升大型项目的驾驭能力，希望新工作有成长空间，技术上有挑战性，技术氛围够Geek，使人有成就感</div>
            </div> -->
        </article>
    </div>
</body>
</html>
